<!DOCTYPE html>
<html lang=''>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <script src='./vue.js'></script>
</head>

<body>
  <div id='app'>
    <!--
      v-foc:click.num="abc"
      v-foc(指令名):click(指令的属性).num(修饰符)="abc"(指令的属性值)
     -->
    <input v-foc:color.num="abc" type="text">

  </div>
</body>
<script>
  const app = Vue.createApp({
    data () {
      return {
        abc: 'ABC'
      }
    },
    // 用来自定义指令的选项
    directives: {
      // 自定义局部指令
      // 在自定义指令的时候不需要自己加 v-,在标签中使用的时候直接使用 v-foc 即可
      foc: {
        // 在绑定元素的 attribute 前
        // 或事件监听器应用前调用
        created (el, binding, vnode, prevVnode) {
          // 下面会介绍各个参数的细节
        },
        // 在元素被插入到 DOM 前调用
        beforeMount (el, binding, vnode, prevVnode) { },
        // 在绑定元素的父组件
        // 及他自己的所有子节点都挂载完成后调用
        mounted (el, binding, vnode, prevVnode) {
          // *******
          setTimeout(() => {
            el.focus()
          }, 3000)

          if (binding.arg === 'click') {
            // 要给 el 添加点击事件
            // el.onclick()
          }
          if (binding.arg === 'color') {
            // 要给 el 添加点击事件
            // el.onclick()
            el.style.color = 'red'
          }

          console.log(el, binding, vnode, prevVnode);

        },
        // 绑定元素的父组件更新前调用
        beforeUpdate (el, binding, vnode, prevVnode) { },
        // 在绑定元素的父组件
        // 及他自己的所有子节点都更新后调用
        updated (el, binding, vnode, prevVnode) {
          // ******
        },
        // 绑定元素的父组件卸载前调用
        beforeUnmount (el, binding, vnode, prevVnode) { },
        // 绑定元素的父组件卸载后调用
        unmounted (el, binding, vnode, prevVnode) { }
      }
    }
  })

  // app.directive()

  app.mount('#app')






</script>

</html>
